<!DOCTYPE html>

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>03 EllipseTest</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>
    <script src="../dist/xtype-svg.js"></script>
    <script>
        var dom = XType.SVG.create({
            xtype: 'svg',
            parent: document.body,
            attr: {
                width: 400,
                height: 400,
                viewBox: '0 0 200 100'
            },
            children: [{
                xtype: 'ellipse',
                attr: {
                    cx: 100,
                    cy: 50,
                    rx: 80,
                    ry: 40,
                    stroke: '#555',
                    'stroke-width': 2,
                    fill: '#f00'
                },
                listeners: {
                    click: () => {
                        alert('You clicked!');
                    }
                }
            }]
        });

        dom.render();
    </script>
</body>

</html>